<template>
  <div class="mySwitch" @click="change">
    <div class="contant">
      <div :class="check ? 'cover-contant1 normal':'cover-contant2 hightlight'"></div>
      <div :class=" (check ? 'in hightlight':'out normal')">
        <div :class="'space' + (check ? ' normal':' hightlight')"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
</style>

<script>
export default {
  name: "mySwitch",
  data() {
    return {
      check: this.open
    };
  },
  methods: {
    change() {
      this.check = !this.check;
      this.$emit("change", this.check);
    }
  },
  props: ["open"]
};
</script>